<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <a href="#" @click.prevent="myOrder" style="float: left">我的订单</a>
          <span style="float: right">欢迎您，{{userName}}&nbsp;&nbsp;&nbsp;<a href="#" @click.prevent="getOut">退出登录</a></span>
          <h2>听说这里的商品都是物超所值，不信你下单试试呀</h2>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-table
              ref="filterTable"
              :data="typeTableData"
              style="width: 100%;text-align: center;margin-top: 23px"
              @row-click="enterShop">
            <el-table-column
                prop="name"
                label="店铺类型"
                width="200"
            >
            </el-table-column>
          </el-table>
        </el-aside>
        <el-main>
          <el-table
              ref="multipleTable"
              :data="goodsTableData"
              tooltip-effect="dark"
              style="width: 100%"
          >
            <el-table-column
                prop="name"
                label="商品"
                width="120">
            </el-table-column>
            <el-table-column
                prop="salePrice"
                label="售价"
                width="120">
            </el-table-column>
            <el-table-column
                prop="shop.name"
                label="店铺"
                width="120">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleEdit(scope.row)"
                >进入店铺</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--    分页工具条-->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="curPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
    <!--    查看已下的订单-->
    <el-dialog title="我的订单" :visible.sync="selectOrders" >
      <el-table
          ref="filterTable"
          :data="myOrdersData"
          style="width: 100%;text-align: center;margin-top: 23px"
      >
          <el-table-column
              prop="id"
              label="订单编号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="goodsName"
              label="商品名称"
              width="100">
          </el-table-column>
          <el-table-column
              prop="orderPhone"
              label="下单电话"
              width="100">
          </el-table-column>
          <el-table-column
              prop="shippingAddress"
              label="配送区域"
              width="180">
          </el-table-column>
          <el-table-column
              prop="distributionArea"
              label="配送地址"
              width="180">
          </el-table-column>
          <el-table-column
              prop="shopName"
              label="店铺名称"
              width="100">
          </el-table-column>
          <el-table-column
              prop="goodsNum"
              label="商品数量"
              width="100">
          </el-table-column>
          <el-table-column
              prop="totalPrice"
              label="订单价格"
              width="100">
          </el-table-column>
          <el-table-column
              prop="state"
              label="订单状态"
              :style="bgColor"
              width="100">
          </el-table-column>
          <el-table-column
              prop="remark"
              label="备注"
              width="100">
          </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      @click="handleOrders(scope.row)" >编辑</el-button>
                  <el-button
                      size="mini"
                      type="danger"
                      @click="handleRevoke(scope.row)" >撤销</el-button>
                </template>
              </el-table-column>
      </el-table>
    </el-dialog>
<!--    编辑订单-->
    <el-dialog title="订单信息"  :visible.sync="dialogFormVisible" center>
      <el-form :model="form" :rules="rules" ref="formref">
        <el-form-item label="编号" :label-width="formLabelWidth" prop="id">
          <el-input v-model="form.id" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goodsName">
          <el-input v-model="form.goodsName" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="下单电话" :label-width="formLabelWidth" prop="customPhone">
          <el-input v-model="form.customPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="配送地址" :label-width="formLabelWidth" prop="district">
          <el-input v-model="form.shippingAddress" autocomplete="off" placeholder="请输入区名称"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" :label-width="formLabelWidth" prop="goodsNum">
          <el-input v-model="form.goodsNum" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "consumer",
  data(){
    return{
      userName:'',
      typeTableData:[],
      goodsTableData:[],
      myOrdersData:[],
      curPage:1,
      pageSize:5,
      total:0,
      rowId:1,
      selectOrders:false,
      orderVisible:false,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      bgColor:{
        backgroundColor:'green',
      },
      form:{
        id:'',
        goodsName:'',
        goodsNum:'',
        customPhone:'',
        shippingAddress:'',
        remark:'',
      },
      rules:{
        customPhone:[
          { required: true, message: '请输入区名称', trigger: 'blur' }
        ],
        shippingAddress:[
          { required: true, message: '请输入详细名称', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    async init(){
      let user = JSON.parse(sessionStorage.getItem('user'));
      this.userName=user.name
      let resp=await this.$axios.get('/shop/queryShopType')
      this.typeTableData=resp.data.data
      this.getGoods()
    },
     enterShop(row){
      this.rowId=row.id
      this.getGoods()
    },
    async getGoods(){
      let resp=await this.$axios.get('/goods/selectByShopTypeId',{
        params:{
          curPage:this.curPage,
          pageSize:this.pageSize,
          shopTypeId:this.rowId
        }
      })
      this.goodsTableData=resp.data.data
      this.total=resp.data.total
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getGoods()

    },
    handleCurrentChange(val) {
      this.curPage=val
      this.getGoods()
    },
    handleEdit(row) {
      sessionStorage.setItem("row",JSON.stringify(row))
      this.$router.push("/shoppingCart")
    },
    handleOrders(){
      this.dialogFormVisible=true
    },
    async myOrder(){
      let user = JSON.parse(sessionStorage.getItem('user'));
      let resp=await this.$axios.get('/pendingOrders/queryByCustomer',{
        params:{
          id:user.id,
          name:user.name
        }
      })
      this.myOrdersData=resp.data.data
      this.selectOrders=true
    },
    async handleRevoke(row){
      let resp=await this.$axios.get('/historicalOrders/goToHistory',{
        params:{
          tip:'撤销订单',
          no:row.id,
          orderTime: row.orderTime,
          orderPhone: row.orderPhone,
          shippingAddress: row.shippingAddress,
          distributionArea: row.distributionArea,
          shopName: row.shopName,
          goodsName: row.goodsName,
          goodsNum: row.goodsNum,
          goodsAmount: row.totalPrice,
          remark: row.remark
        }
      })
      if (resp.data.code === 200) {
        this.curPage = 1
        this.selectOrders=false
        this.$message({
          type: 'success',
          message: '成功!'
        });
      } else {
        this.$message({
          type: 'error',
          message: '失败'
        });
        this.selectOrders=false
      }
    },
    save(){
      this.$refs.formref.validate(async valid=> {
        if (valid ) {
          let res =await this.$axios.get('/pendingOrders/update',{
            params: {
              remark:this.form.remark,
              orderTime:s,
              customerId:this.customer.id,
              customerName:this.customer.name,
              orderPhone:this.form.orderPhone,
              shippingAddress:this.form.detailedAddress,
              distributionArea:'',
              goodsName:this.form.goodsName,
              goodsNum:this.form.goodsNum,
              shopName:this.shopName,
            }
          })
          if(res.data.code===200){
            this.$message({
              type: 'success',
              message: '下单成功!'
            });
            this.orderVisible=false
            this.$router.push('/consumer')
          }else {
            alert("操作失败")
          }
        } else {
          return false;
        }
      })
    },
    getOut(){
      sessionStorage.clear()
      this.$router.push('/login')
    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>

</style>